<template>
  <div class="PanelProgress">
    <div class="canvas_box" id="canvas_box">
      <canvas id="progress"></canvas>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PanelProgress',
  data() {
    return {
      trueNum: 0,
      allNum: 0,
      percentage: 0,
    }
  },
  props: {},
  methods: {
    toCanvas(progress) {
      let that = this
      //canvas进度条
      let box = document.getElementById('canvas_box')
      var canvas = document.getElementById('progress')
      var ctx = canvas.getContext('2d')
      let dpr = window.devicePixelRatio
      // 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等
      canvas.width = dpr * box.offsetWidth
      canvas.height = dpr * box.offsetWidth
      // 由于画布扩大，canvas的坐标系也跟着扩大，如果按照原先的坐标系绘图内容会缩小
      // 所以需要将绘制比例放大
      ctx.scale(dpr, dpr)
      // canvas.width = canvas.height = box.offsetWidth
      canvas.style.width = canvas.style.height = box.offsetWidth + 'px'
      var percent = progress, //最终百分比
        coordinateX = canvas.width / 2 / dpr, // 中心x坐标
        coordinateY = canvas.height / 2 / dpr, //中心y坐标
        radius = box.offsetWidth / 2 - 12, //圆环半径
        lineWidth = 6.5 // 圆形线条的宽度

      circle(coordinateX, coordinateY, radius)

      //画圆
      function circle(cx, cy, r) {
        ctx.beginPath()
        ctx.lineWidth = lineWidth
        ctx.strokeStyle = '#ffffff'
        ctx.shadowColor = 'rgba(4, 0, 0, 0.15)'
        ctx.shadowBlur = 10
        ctx.arc(cx, cy, r, (Math.PI * 5) / 6, (Math.PI * 1) / 6)
        ctx.stroke()
      }

      //画弧线
      function sector(cx, cy, r, startAngle, endAngle, anti) {
        ctx.beginPath()
        ctx.lineWidth = lineWidth
        if (Number(endAngle) > 0) {
          // 渐变色 - 可自定义
          var linGrad = ctx.createLinearGradient(
            coordinateX - radius - lineWidth,
            coordinateY,
            coordinateX + radius + lineWidth,
            coordinateY
          )
          linGrad.addColorStop(0.0, '#a37947')
          linGrad.addColorStop(1.0, '#d6b77e')
          ctx.strokeStyle = linGrad
          //圆弧两端的样式
          ctx.lineCap = 'round'
          ctx.arc(
            cx,
            cy,
            r,
            (Math.PI * 5) / 6,
            ((Math.PI * 1) / 6 + Math.PI * 2 - (Math.PI * 5) / 6) * (endAngle / 100) + (Math.PI * 5) / 6
          )
          ctx.stroke()
        } else {
          ctx.strokeStyle = '#ffffff'
          //圆弧两端的样式
          ctx.lineCap = 'round'
          ctx.arc(
            cx,
            cy,
            r,
            (Math.PI * 5) / 6,
            ((Math.PI * 1) / 6 + Math.PI * 2 - (Math.PI * 5) / 6) * (100 / 100) + (Math.PI * 5) / 6
          )
          ctx.stroke()
        }
      }

      //刷新
      function loading() {
        var percent3 = progress
        if (process >= percent) {
          process = percent
          clearInterval(circleLoading)
        }
        //清除canvas内容
        ctx.clearRect(0, 0, coordinateX * 2, coordinateY * 2)

        //中间的字
        ctx.font = 'bold 0.6rem PingFangSC-Medium'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillStyle = '#a97e4c'
        ctx.fillText(that.trueNum + '/' + that.allNum, coordinateX, coordinateY - 10)

        ctx.font = '0.35rem PingFangSC-Regular'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillStyle = '#333333'
        // ctx.fillText('实到/应到', coordinateX, coordinateY + +20)
        ctx.fillText('请假/总人数', coordinateX, coordinateY + 20)

        //圆形
        circle(coordinateX, coordinateY, radius)

        //圆弧
        sector(coordinateX, coordinateY, radius, (Math.PI * 5) / 6, process)

        //控制结束时动画的速度
        if (process < percent3) {
          if (process / percent > 0.9) {
            process += 0.4
          } else if (process / percent > 0.8) {
            process += 0.6
          } else if (process / percent > 0.7) {
            process += 0.8
          } else {
            process += 1.0
          }
        }
      }

      var process = 0.0

      var circleLoading = window.setInterval(function () {
        loading()
      }, 10)
    },
    getData(data) {
      // this.trueNum = data.attendCount
      // this.allNum = data.shouldAttendCount
      this.trueNum = data.leaveCount
      this.allNum = data.totalCount
      this.percentage = this.allNum == 0 ? 100 : parseFloat((this.trueNum / this.allNum) * 100)
      if (this.trueNum === 0) {
        this.toCanvas(0)
      } else {
        this.toCanvas(this.percentage.toFixed(3))
      }
    },
  },
  mounted() {},
  created() {},
}
</script>
<style lang="scss" scoped>
.PanelProgress {
  .canvas_box {
    width: 142px;
    height: 142px;
    margin: 15px auto;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    position: relative;
  }
}
</style>
